<template>
	<view class="outer_box" :style="{height:height+'px'}">
		<scroll-view scroll-y="true">
			<view v-if="!isNull" class="person-box">
				<view class="person-card" v-for='(item,index) in serviceobject'>
					<view class="person">
						<view class="name" @tap="back(item.name,item.id)">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								<text v-if="item.relation==1">本人</text>
								<text v-if="item.relation==2">妻子</text>
								<text v-if="item.relation==3">父亲</text>
								<text v-if="item.relation==4">母亲</text>
								<text v-if="item.relation==5">岳父</text>
								<text v-if="item.relation==6">岳母</text>
								<!-- <text class="ml-1"> {{item.age}}岁</text> -->
							</view>
						</view>
						<view class="phone" @tap="back(item.name,item.id)">
							<view class="">{{item.phone}}</view>
							<view class="">添加时间：{{item.createTime | dateFormatYear}}</view>
						</view>
						<image @tap="deleteuserrelation(item.id)" class="person-card-img" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/sc@2x.png" mode=""></image>
					</view>
				</view>

			</view>
			<view v-if="isNull" class="order_null">
				<image src="../../static/wurenjiuzhen@2x.png"></image>
				<text>暂无就诊对象</text>
				<!-- <button class="btn-shop-list">去逛逛</button> -->
			</view>
		</scroll-view>
		<view class="add-btn-box">
			<view class="add-btn" @tap='openFamilyBind'>
				添加就诊对象
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNull:false,
				serviceobject:'',
				height: 500,
				relationList: [{
					name:'张三',
					relation:1,
					phone:19839456635,
					age:18,
					createTime:'2021.1.21'
				},{
					name:'张三',
					relation:1,
					phone:19839456635,
					age:18,
					createTime:'2021.1.21'
				}],
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(0)
				}
			})
		},
		onShow() {
			this.getserviceobject()
		},
		methods: {
			back(name,id){
				var server = {
					name:name,
					id:id
				}
				uni.$emit('serviceobject',server)
				uni.navigateBack({
					delta:1
				})
			},
			//解绑家人
			deleteuserrelation(id){
				uni.showModal({
				    title: '提示',
				    content: '是否解除绑定本记录？',
				    success: (res)=> {
				        if (res.confirm) {
				            this.del(id)
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			del(id){
				this.$api.delserviceobject({
					id:id
				}).then((res) => {
					// if(res.data.success){
						uni.showToast({
							title: "解绑成功",
							duration: 1000,
						});
						this.getserviceobject()
					// }else{
					// 	uni.showToast({
					// 		title: res.data.message,
					// 		duration: 1000,
					// 	});
					// }
							
				})
			},
			//获取家人列表
			getserviceobject() {
				this.$api.getserviceobject().then((res) => {
					if(res.data.code = 200){
						console.log(res.data.dataMap)
						this.serviceobject = res.data.dataMap
						this.isNull = this.serviceobject.length < 1 ? true : false
					}
			
				})
			
			},
			openFamilyBind(){
				uni.navigateTo({
					url:'AddopcUser'
				})
			}


		}
	}
</script>

<style lang="less" scoped>
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		margin-top: 20rpx;
		color: #666666;
		font-size: 28rpx;
	}
	
	.order_null image {
		margin: 0 auto;
		margin-top: 160rpx;
		width: 261rpx;
		height: 256rpx;
	}
	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
	page{
		background: #F2F7FF;
		// padding: 30rpx;
	}

	.outer_box {
		height: 100%;
		background-color: #F2F7FF;
		display: flex;
		flex-direction: column;

		.add-btn-box {
			display: flex;
			justify-content: center;

			.add-btn {
				width: 78%;
				height: 100upx;
				background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				border-radius: 50upx;
				color: #FEFEFE;
				font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				margin: 20rpx 0;
			}

		}

		.person-box {
			padding: 30rpx;

			.person-card {
				display: flex;
				width: 100%;
				background-color: #fff;
				margin-bottom: 30rpx;

				.person {
					width: 100%;
					padding: 30rpx 30rpx;
					display: flex;
					.person-card-img{
						width: 80rpx;
						height: 80rpx;
					}
					.name,
					.phone {
						flex: 1;

						view:nth-child(1) {
							color: #333333;
							font-weight: bold;
						}

						view:nth-child(2) {
							margin-top: 20rpx;
							color: #999999;
							font-size: 24rpx;
						}
					}

					.phone {
						text-align: center;
					}
				}

			}
		}
	}
</style>
